<template>
	<Layout>
		<template #title>我的订单</template>
		<Tabs :tabs="tabs" :current="current">
			<template v-slot:slot0="{show}">
				<Order v-if="show" status="All" />
			</template>
			<template v-slot:slot1="{show}">
				<Order v-if="show" status="Paid" />
			</template>
			<template v-slot:slot2="{show}">
				<Order v-if="show" status="Review" />
			</template>
			<template v-slot:slot3="{show}">
				<Order v-if="show" status="Completed" />
			</template>
		</Tabs>
		<LoginPopup></LoginPopup>
	</Layout>
</template>

<script setup lang="ts" name="MineMyOrder">
	import Tabs from '@/components/tabs/tabs.vue';
	import Order from './components/roder/order.vue';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const current = ref(0);
	const tabs = ref([
		{ title: '全部', key: 'all', index: 0, },
		{ title: '已付款', key: 'wallet', index: 1, },
		{ title: '待评价', key: 'appraise', index: 2 },
		{ title: '已完成', key: 'finish', index: 3 }
	]);
	onLoad((options) => {
		options = options as { status : string; }
		const tab = tabs.value.find(item => item.key === options.status);
		current.value = tab?.index ?? 0;
	});
</script>